<template>
  <div id="tmpl">
    <!-- 1.0  顶部分类 -->
    <div id="cate">
      <ul v-bind="{style: 'width:' + ulWidth + 'px'}">
        <li>全部</li>
        <li v-for="item in cates" @click="getimglist(item.id)">{{item.title}}</li>
        
      </ul>
    </div>

    <!-- 2.0 图片列表 -->
    <div id="imglist">
      <ul>
        <li v-for="item in list">
          <router-link v-bind="{to: '/photo/photoinfo/' + item.id}">
            <img v-lazy="item.img_url">
            <div class="content">
              <h4>{{item.title}}</h4>
              <p>{{item.zhaiyao}}</p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import common from '../../kits/common.js';
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        cates: [],
        ulWidth: 320,
        list: [
                {
                "id": 44,
                "title": "Hossein Zare 的超现实摄影作品",
                "img_url": "http://182.254.146.100:8080/upload/201504/18/thumb_201504181343191605.jpg",
                "zhaiyao": "我们曾介绍过Hossein Zare的极简黑白摄影作品。这一次，摄影师将带领我们进入一个在现实中并不存在的梦想世界。Zare创作了这组近似于彩色插画般的照片。注意他是如何将现实中的自然与城市风光融入到自己想象中的空间里去的。"
                }
        ]
      }
    },
    created() {
      this.getcates();
      this.getimglist(0);
    },
    methods: {
      getcates() {
        var url = common.apidomain + '/api/getimgcategory';
        // 调用$http中的get方法
        this.$http.get(url).then(function(res) {
          if(res.body.status != 0) {
            Toast(res.body.message);
            return;
          }
          //将获取到的数据赋值给 数组
          this.cates = res.body.message;

          //计算ulwidth
          var liwidth = 78;
          var count = this.cates.length + 1;
          this.ulWidth = count * liwidth;
        })
      },
      getimglist(cateid) {
        cateid = cateid || 0;

        var url = common.apidomain + '/api/getimages/' + cateid;

        this.$http.get(url).then(function(res) {
          var body = res.body;
          if(body.status != 0) {
            Toast(body.message);
            return;
          }

          this.list = body.message;
        })
      }
    }
  }
</script>

<style scoped>
  #cate {
    width: 320px;
    max-width: 320px;
    overflow-x: auto;
  }
  #cate ul {
    width: 1000px;
    padding-left: 10px;
    list-style: none;
  }
  #cate li {
    display: inline-block;
    padding-left: 10px;
    cursor: pointer;
  }
  #imglist {
    background-color: rgba(0, 0, 0, .4);
  }
  #imglist li {
    position: relative;
  }
  #imglist img {
    width: 100%;
    height: 300px;
  }
  .content {
    position: absolute;
    bottom: 0;
    color: #fff;
  }
  .content p {
    color: #fff;
    line-height: 28px;
  }
</style>
